웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
브라우저의 쿠키(cookie) 데이터저장소를 이용하면 최근에 본 페이지나 키워드등을 저장할 수 있습니다. 온라인쇼핑몰이라면 관심상품으로 등록할 수도 있을테고... 온라인 사전 사이트라면 기존에 검색했던 내용들을 저장할 수 있을 것입니다.
# 자바스크립트에서 쿠키(cookie) 사용하는 방법
아래는 자바스크립트에 수 많은 이들이 사용하는 쿠기를 저장하고 불러오는 setCookie(), getCookie() 사용자 함수입니다. 아래 코드를 사용해 간단하게 쿠키를 불러오거나 읽어올 수 있습니다. 간단한 cookie 사용법 및 문법은 아래와 같습니다.document.cookie = "쿠키이름=쿠키값"
Ex) document. cookie = "test=abcde";
이를 함수로 만든 자세한 코드와 사용방법 및 예제는 아래를 참고해주세요.
! cookie는 언제 사용할까요?
쿠키는 로컬저장소에 저장되며 서버가 아닌 클라이언트측에 사용하는 저장소로 아래와 같이 사용됩니다.1. 간단한 텍스트 데이터를 저장하여 보여주는 경우
cookie는 저장용량이 제한적이라 간단한 텍스트를 저장하고 가져오는데 사용됩니다. 예를들어 이전에 보았던 상품 목록의 id 값이나 자주 사용하는 메뉴 등을 저장할 수도 있습니다.
2. 인증과 관련된 정보
Authentication 인증 정보 또는 세션에 저장된 토큰 값 등 보안에 필요한 정보를 저장하는 용도로도 사용합니다.
이처럼 보통 간단한 정보 저장에 많이 사용되는데 그 이유는 html5에서 localStorage 또는 sessionStorage를 사용하여 key, value를 사용한 더 많은 정보를 담을 수 있기 때문입니다. 예를들어 데이터의 빠른 로딩을 위해 로컬에 캐시하여 저장할 수도 있습니다. 이런 경우 데이터의 길이가 길기 때문에 쿠키보다는 localStorage 등의 인터페이스를 더 많이 선호합니다. 그럼 아래는 쿠키를 사용하는 자세한 예제입니다.
# cookie() 예제 소스보기
이번에는 cookie의 값을 저장하고 가져오는 방법을 예제를 통해 알아봅니다. cookie는 일반적으로 함수를 만들어서 더 쉽게 저장하거나 가져오는 방법이 사용됩니다. 먼저 아래 코드를 봐주세요.! cookie를 설정하는 setCookie() 함수 만들기
cookie를 쉽게 저장하도록 함수를 아래와 같이 만들어 사용할 수 있습니다.@ setcookie.js
function setCookie(cookie_name, value, days) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + days);
// 설정 일수만큼 현재시간에 만료값으로 지정
var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString());
document.cookie = cookie_name + '=' + cookie_value;
}
exdate.setDate(exdate.getDate() + days);
// 설정 일수만큼 현재시간에 만료값으로 지정
var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString());
}
위와같이 쿠키를 저장하는 함수 setCookie()를 만들어 아래와 같이 사용할 수 있습니다. 만약 3일 후에 만료되는 myHobby이름으로 game이라는 값을 저장한다면? 아래와 같이 사용합니다.
setCookie('myHobby', 'game', '3');
위 함수는 각각 함수이름, 저장할 값 그리고 만료시간값을 설정한 코드입니다. 만료시간은 현재시간의 밀리세컨드인 timestamp값을 사용합니다.
@ 만료 시간을 분 단위 설정이 필요한 경우?
위의 setCookie() 함수는 일자 별 설정이 가능합니다. 즉 하루, 이틀 값으로 설정할 수 있죠. 만약 분으로 설정하려면 아래의 함수를 사용하시기 바랍니다.
setCookie: (cookie_name, value, miuntes) => {
const exdate = new Date();
exdate.setMinutes(exdate.getMinutes() + miuntes);
const cookie_value = escape(value) + ((miuntes == null) ? '' : '; expires=' + exdate.toUTCString());
document.cookie = cookie_name + '=' + cookie_value;
},
const exdate = new Date();
exdate.setMinutes(exdate.getMinutes() + miuntes);
const cookie_value = escape(value) + ((miuntes == null) ? '' : '; expires=' + exdate.toUTCString());
document.cookie = cookie_name + '=' + cookie_value;
},
@ Cookie가 잘 저장되었을까? 확인하려면?
cookie값은 document객체의 cookie에 저장되어 있습니다. 아래의 방법으로 확인할 수 있습니다.
document.cookie;
// myHobby=game가 출력되며 ;를 구분자로 저장됨
// myHobby=game가 출력되며 ;를 구분자로 저장됨
그러면 값을 가져오는 방법은 어떻게될까요?
! cookie를 가져오는 getCookie() 함수 만들기
이번에는 저장된 쿠키값을 가져오는 함수를 만들어보겠습니다.function getCookie(cookie_name) {
var x, y;
var val = document.cookie.split(';');
for (var i = 0; i < val.length; i++) {
x = val[i].substr(0, val[i].indexOf('='));
y = val[i].substr(val[i].indexOf('=') + 1);
x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기
if (x == cookie_name) {
return unescape(y); // unescape로 디코딩 후 값 리턴
}
}
}
var x, y;
var val = document.cookie.split(';');
for (var i = 0; i < val.length; i++) {
x = val[i].substr(0, val[i].indexOf('='));
y = val[i].substr(val[i].indexOf('=') + 1);
x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기
if (x == cookie_name) {
return unescape(y); // unescape로 디코딩 후 값 리턴
}
}
}
이제 getCookie()를 사용하여 저장된 쿠키값을 불러올 수 있습니다.
! 저장된 키 값에 새로운 값을 추가하기
아래 코드는 사용자 함수로 만약 저장할 값이 하나가 아닌 여러개인 경우... 예를 들어 쇼핑몰의 상품이 여러개인 경우 기존의 값은 그대로 유지하되 새로운 값만 추가하기 위한 함수 addCookie()입니다.아래 예제를 사용하기 위해서는 위 setCookie()와 getCookie()를 함께 사용해야 합니다. 그럼 아래 예제를 참고하세요.
# Cookie값에 상품id를 추가하는 함수 예제보기
이번에는 상품의 id값을 추가하는 방법의 예제를 만들어보겠습니다. addCookie()는 새로운 상품 id값을 계속해서 추가하며 아래와 같이 사용합니다.- - id값 가져오기 addCookie()
- - 새로운 id값 추가하기 addCookie(id)
아래는 addCookie() 함수의 소스코드입니다.
@ addCookie.js
var items = getCookie('productItems'); // 이미 저장된 값을 쿠키에서 가져오기
var maxItemNum = 5; // 최대 저장 가능한 아이템개수
var expire = 7; // 쿠키값을 저장할 기간
if (items) {
var itemArray = items.split(',');
if (itemArray.indexOf(id) != -1) {
// 이미 존재하는 경우 종료
console.log('Already exists.');
}
else {
// 새로운 값 저장 및 최대 개수 유지하기
itemArray.unshift(id);
if (itemArray.length > maxItemNum ) itemArray.length = 5;
items = itemArray.join(',');
setCookie('productItems', items, expire);
}
}
else {
// 신규 id값 저장하기
setCookie('productItems', id, expire);
}
}
이제 위 함수를 사용하여 상품 id값을 저장할 수 있게됩니다. 만약 새로운 id값 111을 저장한다면 아래와 같이 사용합니다.
addCookie('111');
저장된 값은 아래와같이 확인할 수 있죠.
addCookie();
이제 새로운 값 222를 추가해봅니다.
addCookie('222')
똑같은 값이 있으면 이미 있다고 출력 후 아무런 일도 발생하지 않습니다.
addCookie('222')
// Already exists
// Already exists
! 쿠키와 세션의 차이는?
쿠키는 사용자가 브라우저의 쿠키데이터를 비우거나 금지하지 않는다면 계속해서 유지가 됩니다. 이와 달리 세션 저장소의 경우 방문자가 접속해 세션이 발생하고 지정된 시간이 지나 세션이 종료되면 저장소의 내용도 사라지게 된다는 점이 차이점입니다.마치면서, 한가지 더...
HTML5에서는 기존의 cookie를 이용한 데이터 저장방법 외에 localStorage 라는 API를 활용해 더 큰 데이터의 저장이 가능합니다. 둘 중에 더 필요한 방법을 사용해 사용하시면 됩니다!* LocalStorage API 정보 바로가기
https://webisfree.com/2016-06-24/[자바스크립트]-localstorage-sessionstorage-클라이언트에-정보-저장
! 만약 위 쿠키 사용이 안된다면?
쿠키사용은 브라우저의 설정값에 따라서 사용이 불가능할 수 있습니다. 사용설정을 확인해보시기 바랍니다. 또 다른 방법으로는 다른 브라우저에서 정상동작하는가의 여부도 확인해보세요.아래의 글도 찾고 계시지 않나요?
Node Express에서 간단한 Session 구현 방법 및 예제 보기
[Python] flask 쿠키 사용하는 방법, cookie
브라우저 쿠키 사이즈 에러 400 이슈 해결하기- 리눅스 sh 파일 실행시 bad interpreter 에러 해결하기
[nextjs] script 파일 로드하는 방법 알아보기
자바스크립트 쿠키값 간단하게 저장 및 불러오기
[자바스크립트] localStorage, sessionStorage 클라이언트에 정보 저장
[자바스크립트] 오늘 하루만 팝업 띄우기- 서버측 쿠키와 클라이언트측 쿠키의 차이점은?
- localStorage vs cookie 장단점